<!--
组件化开发:
  组件化: 一个页面可以拆分成一个个组件,每个组件有着自己独立的结构(template) 样式(style) 和 行为(script)
  好处: 便于维护,利于复用---提升开发效率
  组件分类: 普通组件 根组件(一个页面的所有的普通组件集合)
-->
<!--app是一个大组件,遵循大组件开发原则-->
<!--这里写结构-->
<template>
  <div class="app">
     我是结构,我只能有一个
    <div class="appSon">
        我是子结构,我随意23132
    </div>
  </div>

</template>
<!--
简单class型的style表示法
嵌套class型的style表示法
注意:
  1.style里面不能有注释语句,不然会报错
  2.style即使有错误编译器也不报错,但这时候页面渲染会出错,出错的样式会清除
-->

<!--这里写行为-->
<script>
//导出当前组件的配置项
//里面可以提供 data() methods computed watch生命周期
export default {
  created() {
  },
  methods: {

  },
  computed(){

  },
  watch(){

  }
}
</script>








<!--这里写样式-->
<style>

.app{
  width: 400px;
  height: 400px;
  background-color: #9f15a7;
}

.appSon{
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.app .appSon{
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
</style>